<template>
  <div class="container" >
    <el-table
      :data="data.list"
      size="small"
      style="width: 100%">
      <el-table-column
        prop="article.title"
        label="文章标题"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="举报类型"
        width="100">
         <template  v-slot="slot">
        <el-tag size="small" v-if="slot.row.type == 0">其他问题 </el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 1">标题夸张</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 2">低俗色情</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 3">错别字多</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 4">旧闻重复</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 5">涉嫌广告</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 6">内容抄袭</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 7">政治相关</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 8">内容不实</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 9">涉嫌违法犯罪</el-tag>
        <el-tag size="small" v-else-if="slot.row.type == 10">侵犯名誉/隐私/著作/肖像权等</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="举报描述">
      </el-table-column>
      <el-table-column
        label="处理状态">
         <template  v-slot="slot">
           <!-- 0:审核失败;1:审核中;2:审核完成,内容未违规,3:审核完成,内容违规已删除该文章 -->
        <p v-if="slot.row.status == 0">审核失败</p>
        <p v-else-if="slot.row.status == 1">审核中 </p>
        <p v-else-if="slot.row.status == 2">审核完成,内容未违规 </p>
        <p v-else-if="slot.row.status == 3">审核完成,内容违规已删除该文章 </p>
        </template>
      </el-table-column>
       <el-table-column
        prop="createdAt"
        width="85"
        align="center"
        :formatter="DateFormat"
        label="举报时间">
      </el-table-column>
      <el-table-column label="操作" width="45" align="center">
        <template v-slot="slot">
          <i class="el-icon-delete" @click="clickDelete(slot.row.id)"></i>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { deleteAccusationArticle } from '@/api/article'
export default {
  name: 'accusation',
  props: {
    data: Object,
    required: true,
    default: function () {
      return {}
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击删除按钮
    clickDelete (id) {
      this.$confirm('你确定要删除选中项吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteAccusationArticle({ ids: [id] })
          this.$emit('refresh')
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 格式化举报日期
    DateFormat (row, column, cellValue, index) {
      return new Date(cellValue).getFullYear() + '-' + (new Date(cellValue).getMonth() + 1) + '-' + new Date(cellValue).getDate()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-delete:hover{
   cursor: pointer;
}
</style>
